<template>
        <div class="outSideBox">
            <div class="login">
                <!--头像区域-->
                <div class="headerImg">
                    <img :src="headerImg===''?'https://cube.elemecdn.com/9/c2/f0ee8a3c7c9638a54940382568c9dpng.png':headerImg" alt="头像">
                </div>
                <el-form :model="employee" :rules="employeeRules" ref="loginFormRef" label-width="100px" class="login_form">
                    <el-form-item  label="用户名" prop="username">
                        <el-input
                                clearable
                                :prefix-icon="inputIcons.username"
                                v-model="employee.username"
                                @focus="inputIcons.username=''"
                                @blur="inputIcons.username='el-icon-user-solid'">
                        </el-input>
                    </el-form-item>
                    <el-form-item label="密码" prop="password">
                        <el-input
                                show-password
                                clearable
                                :prefix-icon="inputIcons.password"
                                v-model="employee.password"
                                @focus="inputIcons.password=''"
                                @blur="inputIcons.password='el-icon-lock'">

                        </el-input>
                    </el-form-item>
                    <el-form-item label="验证码" prop="checkCode">
                        <el-input
                                clearable
                                :prefix-icon="inputIcons.checkCode"
                                v-model="employee.checkCode"
                                class="checkCode"
                                @focus="inputIcons.checkCode=''"
                                @blur="inputIcons.checkCode='el-icon-thumb'">
                        </el-input>
                        <img class="checkCodeImg" @click="changeCheckCodeImg" :src="checkCodeImg">
                    </el-form-item>
                </el-form>
                <div class="login_bth">
                    <el-button class="login_button" @click="login" type="primary">登录</el-button>
                    <el-button class="regist_button">注册</el-button>
                </div>
            </div>
        </div>
</template>

<script>
    export default {
        name: "Login",
        data(){
            return {
                employee:{
                    username:'admin',
                    password:'123456',
                    checkCode:''
                },
                employeeRules:{
                    username:[{ required: true, message: '请输入用户名', trigger: 'blur' }],
                    password:[{ required: true, message: '请输入密码', trigger: 'blur' }],
                    checkCode:[{ required: true, message: '请输入验证码', trigger: 'blur' }]
                },
                checkCodeImg:'http://127.0.0.1:8122/orderSystem/employee/getCheckCode',
                inputIcons:{
                    username:'el-icon-user-solid',
                    password:'el-icon-lock',
                    checkCode:'el-icon-thumb'
                }
            }
        },
        methods:{
            changeCheckCodeImg(){
                this.checkCodeImg="http://127.0.0.1:8122/orderSystem/employee/getCheckCode?"+new Date().getTime()
            },
            login(){
                this.$refs.loginFormRef.validate(async valid=>{
                    if (!valid)return
                   const {data:res}=await this.$http.get("/employee/checkCode?checkCode="+this.employee.checkCode)
                    if (res.status!=200){
                        this.$message.error("验证码错误!")
                    }else {
                       const{data:res}=await this.$http.post("/employee/login",this.employee)
                        if (res.status!=200){
                             this.$message.error('用户名或密码错误!')
                        }
                        //用户名密码校验通过
                        else {
                            //未激活
                            if (!res.data.enable){
                                 this.$message.error("该用户未激活，请联系管理员!")}
                            //成功登录
                            else {
                                //存入头像信息
                                if (res.data.headPortrait.indexOf('http')!=-1){
                                    document.cookie=`${res.data.username}=${res.data.headPortrait}`
                                }else {
                                    document.cookie=`${res.data.username}=${this.$http.defaults.baseURL}${res.data.headPortrait}`
                                }
                                //存入token
                                sessionStorage.setItem('token',res.data.token)
                                //存入用户名
                                sessionStorage.setItem("username",res.data.username)
                                //存入员工的eid
                                sessionStorage.setItem('eid',res.data.eid)
                                this.$message.success("欢迎你，"+res.data.name)
                                //存入权限数组
                                await this.$store.dispatch("initPoserListAction", res.data.role.purviewId);

                                await this.$router.push("/main")
                            }
                        }
                    }
                    //刷新验证码
                    this.checkCodeImg="http://127.0.0.1:8122/orderSystem/employee/getCheckCode?"+new Date().getTime()
                })
            }
        },
        computed:{
            headerImg(){
                var cookieArr= document.cookie.split(";")
                for (var i=0;i<cookieArr.length;i++){
                    var keyName=cookieArr[i].substring(0,cookieArr[i].indexOf('='))
                    var valName=cookieArr[i].substring(cookieArr[i].indexOf('=')+1)
                    if (keyName.trim()===this.employee.username){
                        this.$store.commit('setHeaderImg',valName)
                        return valName
                    }
                }
                return ""
            }
        }
    }
</script>

<style scoped>
    .outSideBox{
        width:100%;
        height: 100%;
        background: url("../assets/backgroundImg.png") no-repeat center center;
        background-size: cover;

    }
    .headerImg img{
        border: solid gainsboro 6px;
        width: 100px;
        height: 100px;
        margin-left: 50%;
        margin-top: 6%;
        transform: translate(-50%,-50%);
        border-radius: 50%
    }
    .login{
        width: 480px;
        height: 360px;
        background: #ffffff;
        transform:translate(-50%,-50%);
        position: absolute;
        left: 50%;
        top: 50%;border-radius: 10px;
    }
    .login_form{
        margin-top: -45px;
    }
    .checkCodeImg{
        margin-left: 10px;
        margin-top: 5px;
    }
    .checkCode{
        width: 100px;
        float: left;
    }
    .login_form .el-form-item{
        width: 400px;
    }

    .login_button{
        margin-left: 130px;
        margin-right: 50px;
    }

</style>
